<template>
    <div class="container">
        <div v-if="!logTableShow">
            <div class="public-filter">
                <div style="display: flex">
                    <custom-filter
                        :customerType="customerType"
                        :selectOptions="countryRegionList"
                        @onSubmit="handleInitTable"
                        @onReset="handleResetTable"
                        hideEnabled
                    ></custom-filter>
                </div>
                <yl-multi-button
                    class="multi-action"
                    :selectedRowKeys="selectedRowKeys"
                    @add="handleAddProd"
                    @handleImport="handleImport"
                    :Import="true"
                    :hideAdd="true"
                ></yl-multi-button>
            </div>

            <div class="container-data">
                <a-table
                    :columns="customerType == 'T' ? merchantColumns : columns"
                    :data-source="dataSource"
                    :row-key="setRowKey"
                    :pagination="pagination"
                    :loading="loading"
                    @change="handleTableChange"
                    class="dept-data__table-table"
                >
                    <template
                        v-for="item in customerType == 'T' ? merchantColumns : columns"
                        :key="item.dataIndex"
                        v-slot:[item.slotName]
                    >
                        <span>{{ t(`yl.${item.slotName}`) }}</span>
                    </template>

                    <template #customisChain="{ record }"> {{ record.isChain == 1 ? '是' : '否' }}</template>
                    <template #customStatus="{ record }">
                        {{ record.status == '1' ? '正常' : record.status == '2' ? '冻结' : '删除' }}</template
                    >
                    <template #general="{ record }"> <span class="store-Text">110/100</span></template>
                    <template #Esl="{ record }"> <span class="store-Text">100</span></template>
                    <template #jz="{ record }">
                        <span class="store-Text">{{ record.jzCount }}</span></template
                    >
                    <template #warning="{ record }"> <span class="store-Text">30</span></template>
                    <template #customAction="{ record }">
                        <a-button class="action-btn" @click="handleEdit(record)" size="small">
                            <template #icon>
                                <MenuOutlined />
                            </template>
                        </a-button>
                        <a-button class="action-btn" @click="handlePaw(record, 'Freeze')" size="small">
                            <template #icon>
                                <UnlockOutlined v-if="record.status == '1'" />
                                <LockOutlined v-if="record.status == '2'" />
                            </template>
                        </a-button>
                        <a-button class="action-btn" size="small" @click="handlePaw(record, 'ResetPaw')">
                            <template #icon>
                                <ReloadOutlined />
                            </template>
                        </a-button>
                        <a-button class="action-btn" size="small">
                            <template #icon>
                                <ImportOutlined />
                            </template>
                        </a-button>
                        <a-button class="action-btn" size="small" @click="handLog">
                            <template #icon>
                                <HistoryOutlined />
                            </template>
                        </a-button>
                    </template>
                </a-table>
            </div>
        </div>
        <logTable :logType="'门店'" :timeShow="false" @goBack="goBack" v-if="logTableShow"></logTable>
        <add-model
            v-if="addVisible"
            :visible="addVisible"
            :loading="confirmLoading"
            :title="JSON.stringify(selectedRow) !== '{}' ? t('yl.editStore') : t('yl.addStore')"
            :dept="selectedRow"
            :countryRegionList="regionList"
            @cancle="addhandleCancle"
            @submit="addhandleSubmit"
        ></add-model>
        <importModel
            :visible="importVisible"
            :loading="importLoading"
            :title="importTitle"
            @cancle="handleImportCancle"
            @submit="handleimportSubmit"
        ></importModel>
        <yl-paw-model
            :visible="pawVisible"
            :loading="pawLoading"
            :title="pawTitle"
            :pawId="pawId"
            :notesTitle="notesTitle"
            :type="type"
            :password="password"
            @cancle="handlePawCancle"
            @submit="handlePawSubmit"
        ></yl-paw-model>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref, computed, createVNode, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { PaginationQuery } from '@/types/table';
import {
    MenuOutlined,
    UnlockOutlined,
    ReloadOutlined,
    LockOutlined,
    ImportOutlined,
    HistoryOutlined,
} from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import ylMultiButton from '@/components/ylMultiButton.vue';
import customFilter from './components/tableFilter.vue';
import addModel from './components/addModel.vue';
import importModel from '@/components/importModel.vue';
import ylPawModel from '@/components/customer/pawModel.vue';
import logTable from '@/components/log/index.vue';
import deleteDataId from './deleteData';
import { merchantColumns, columns } from './dataColumns';
import useTables from './dataTables';
import { deleteEmptyKey } from '@/utils/help';
import { addMerchant, editMerchant, getArea } from '@/api/merchant';
import { getUsersType } from '@/api/user';

export default defineComponent({
    name: 'department',
    components: {
        customFilter,
        ylMultiButton,
        addModel,
        MenuOutlined,
        UnlockOutlined,
        ReloadOutlined,
        ImportOutlined,
        HistoryOutlined,
        importModel,
        ylPawModel,
        logTable,
        LockOutlined,
    },
    setup() {
        const { t } = useI18n();
        // 搜索条件
        let { tableQuery, getMerchantStoreData, selectedRow, selectedRowKeys, visible, addVisible, regionList } = useTables;
        const state = reactive({
            confirmLoading: false, // 弹窗按钮的loading
        });
        const customerType: any = ref('2');
        const countryRegionList: any = ref([]);
        const importModel = reactive({
            importVisible: false,
            importLoading: false, // 弹窗按钮的loading
            importTitle: '批量导入商家',
        });
        const paw = reactive({
            pawVisible: false,
            pawLoading: false, // 弹窗按钮的loading
            pawTitle: '冻结商户',
            pawId: '',
            notesTitle: '注：冻结后该商户无法使用',
            type: '1',
            password: '',
        });
        // 日志列表显示字段
        const logTableShow = ref(false);
        const importShow = ref(false);
        onMounted(() => {
            getMerchantStoreData(tableQuery);
            getAreaData();
            userTypeFun();
        });
        onUnmounted(async () => {
            // visible = false;
            console.log(visible.value);
            visible.value = false;
        });
        // 获取区域
        const getAreaData = async () => {
            const { content, totalElements } = await getArea({
                page: 0,
                size: 9,
                sort: 'id,desc',
                parentAreaCodeIsNull: true,
            });
            countryRegionList.value = content;
            countryRegionList.value = content.map((item) => {
                return {
                    ...item,
                    isLeaf: false,
                };
            });
        };

        const userTypeFun = async () => {
            customerType.value = await getUsersType();
        };
        // 搜索
        const handleInitTable = (query: PaginationQuery | TableCustomFilter) => {
            tableQuery.page = 0;
            tableQuery = Object.assign({}, tableQuery, { ...query });
            getMerchantStoreData(tableQuery);
        };
        // 重置
        const handleResetTable = (query: PaginationQuery | TableCustomFilter) => {
            tableQuery = Object.assign({}, tableQuery, { ...query });
            tableQuery.page = 0;
            selectedRowKeys.value = [];
            getMerchantStoreData(tableQuery);
        };
        // 新增、编辑部门
        const addhandleSubmit = (dept: NormalObj) => {
            state.confirmLoading = true;
            let data = JSON.parse(JSON.stringify(dept));
            delete data.provinceList;
            deleteEmptyKey(data);
            const msg = dept.id ? t('yl.editSuccess') : t('yl.addSuccess');
            const realRequest = dept.id ? editMerchant(data) : addMerchant(data);
            return realRequest
                .then(() => {
                    state.confirmLoading = false;
                    message.success(msg);
                    addVisible.value = false;
                    const timer = setTimeout(() => {
                        handleInitTable(tableQuery);
                        clearTimeout(timer);
                    }, 500);
                })
                .catch(() => {
                    state.confirmLoading = false;
                });
        };
        // 冻结弹窗取消
        const handlePawCancle = () => {
            paw.pawVisible = false;
            paw.pawId = '';
            paw.type = '';
        };
        // 冻结取消冻结弹窗提交
        const handlePawSubmit = () => {
            paw.pawVisible = false;
            paw.pawId = '';
            getMerchantStoreData(tableQuery);
        };
        // 冻结解冻
        const handlePaw = (item: any, type: string) => {
            // Freeze 冻结解冻 ResetPaw重置密码
            console.log(item);

            paw.pawTitle = type == 'ResetPaw' ? '重置登录密码' : item.status == '1' ? '冻结商户' : '解冻商户';
            paw.pawId = item.id;
            paw.notesTitle =
                type == 'ResetPaw'
                    ? '注：重置后，该门店使用新密码登录系统。'
                    : item.status == '1'
                    ? '注：冻结后该门店无法使用'
                    : '注：解冻后该门店可以正常使用';
            paw.type = type;
            paw.pawVisible = true;
            paw.pawLoading = false;
            console.log(paw);
        };
        // 批量导入
        const handleImport = () => {
            importModel.importVisible = true;
        };
        const handleImportCancle = () => {
            importModel.importVisible = false;
        };
        const handleimportSubmit = () => {
            importModel.importVisible = false;
        };
        // 返回
        const goBack = () => {
            logTableShow.value = false;
        };
        // 日志点击事件
        const handLog = () => {
            logTableShow.value = true;
        };
        return {
            ...toRefs(state),
            ...toRefs(paw),
            t,
            columns,
            customerType,
            merchantColumns,
            countryRegionList,
            ...toRefs(importModel),
            ...useTables,
            handleInitTable,
            ...deleteDataId(),
            handleResetTable,
            addhandleSubmit,
            getAreaData,
            handleImport,
            handleImportCancle,
            handleimportSubmit,
            importShow,
            logTableShow,
            handlePawCancle,
            handlePawSubmit,
            handlePaw,
            goBack,
            handLog,
            regionList,
        };
    },
});
</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    &-filter {
        @include flex;
        &-item {
            margin-right: 20px;
        }
    }
    &-data {
        padding: $width20 $width0;
        .multi-action {
            background: $white;
        }
        .action-btn + .action-btn {
            margin-left: $width8;
        }
    }
    .store-Text {
        color: #ff6702;
        text-decoration: underline;
        cursor: pointer;
    }
}
</style>
